<template>
  <div class="bs-page-main">
    <div class="user-home">
      <div class="main-box">
        <div v-show="!hideNav" class="sub-nav">
          <ul>
            <li>
              <router-link to="/user/detail" active-class="cur"
                ><i class="detail"></i>Account Details</router-link
              >
            </li>
            <li>
              <router-link to="/user/address" active-class="cur"
                ><i class="addr"></i>Delivery Addresses</router-link
              >
            </li>
            <li>
              <router-link to="/user/order" active-class="cur"
                ><i class="order"></i>Order History</router-link
              >
            </li>
            <li>
              <router-link to="/user/profile" active-class="cur"
                ><i class="profile"></i>Profile</router-link
              >
            </li>
          </ul>
        </div>
        <div :class="editFlag ? 'user-main edit-cur' : 'user-main'">
          <div :class="editFlag ? 'u-tit cur' : 'u-tit'">
            <div>Delivery Addresses</div>
            <router-link to="/user/profile" class="cls"></router-link>
          </div>
          <template v-if="editFlag">
            <div class="edit-ipt addr-n-b">
              <div class="address-list">
                <div class="lb">Default Delivery Address</div>
                <div class="address">
                  <div class="name">John Smith</div>
                  <div class="dt">1226 University Dr</div>
                  <div class="if">Menlo Park, CA 94025-4221</div>
                  <a href="javascript:" class="edit"></a>
                </div>
              </div>
              <div class="address-list">
                <div class="lb">Other Address</div>
                <div class="address">
                  <div class="name">John Smith</div>
                  <div class="dt">1226 University Dr</div>
                  <div class="if">Menlo Park, CA 94025-4221</div>
                  <a href="javascript:" class="edit"></a>
                </div>
                <div class="address">
                  <div class="name">John Smith</div>
                  <div class="dt">1226 University Dr</div>
                  <div class="if">Menlo Park, CA 94025-4221</div>
                  <a href="javascript:" class="edit"></a>
                </div>
              </div>
              <div class="blank-div"></div>
              <div class="btn">
                <a href="javascript:" class="save lg" @click="addFlag = true"
                  >Add Address</a
                >
              </div>
            </div>
          </template>
        </div>
        <div class="address-musk" v-if="addFlag"></div>
        <div :class="addFlag ? 'add-address cur' : 'add-address'">
          <div class="tit">Add Address</div>
          <a class="cls" @click="addFlag = false"></a>
          <div class="form-box">
            <div class="ipt-box">
              <div class="lb">Country/Region</div>
              <div class="ipt">
                <a-select placeholder="Select Your Country/Region">
                  <a-select-option key="usa"> USA </a-select-option>
                </a-select>
              </div>
            </div>
            <div class="ipt-box hf m2">
              <div class="lb">First Name</div>
              <div class="ipt">
                <input type="text" placeholder="Enter Your First Name" />
              </div>
            </div>
            <div class="ipt-box hf">
              <div class="lb">Last Name</div>
              <div class="ipt">
                <input type="text" placeholder="Enter Your Last Name" />
              </div>
            </div>
            <div class="ipt-box">
              <div class="lb">Address</div>
              <div class="ipt">
                <input type="text" placeholder="Enter Your Address" />
              </div>
            </div>
            <div class="ipt-box">
              <div class="lb">Apartment,Suire,Etc(Optinal)</div>
              <div class="ipt">
                <input
                  type="text"
                  placeholder="Enter Your Apartment,Suire,Etc(Optinal)"
                />
              </div>
            </div>
            <div class="ipt-box sd m2">
              <div class="lb">City</div>
              <div class="ipt">
                <input type="text" placeholder="Enter Your City" />
              </div>
            </div>
            <div class="ipt-box sd m2">
              <div class="lb">State</div>
              <div class="ipt">
                <a-select placeholder="Select Your State">
                  <a-select-option key="usa"> USA </a-select-option>
                </a-select>
              </div>
            </div>
            <div class="ipt-box sd">
              <div class="lb">Zip Code</div>
              <div class="ipt">
                <input type="text" placeholder="Zip Code" />
              </div>
            </div>
          </div>
          <div class="btn">
            <a class="set-default" @click="setDefault = !setDefault">
              <i :class="setDefault && 'cur'"></i>This Is My Default Address
            </a>
            <a class="save">Save</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const isMobile = document.documentElement.clientWidth < 800;
export default {
  data() {
    return {
      editFlag: true,
      isMobile,
      addFlag: false,
      setDefault: true,
    };
  },
  computed: {
    hideNav() {
      return isMobile && this.editFlag;
    },
  },
  methods: {},
};
</script>
